<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios基本使用</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

    
    
</head>

<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary" onclick="sendGET()"> 发送GET请求 </button>
        <button class="btn btn-primary" onclick="sendGETParams()"> 发送GET请求,携带参数 </button>
        <button class="btn btn-warning" onclick="sendPOST()"> 发送POST请求 </button>
        <button class="btn btn-primary" onclick="sendHeaders()"> 请求头携带参数请求 </button>
        <button class="btn btn-success" onclick="sendPut()"> 发送 PUT 请求 </button>
        <button class="btn btn-danger"  onclick="sendDELETE()"> 发送 DELETE 请求 </button>

        <table class="table table-hover">
            <thead>
                <tr>
                    <th>id</th>
                    <th>品牌</th>
                    <th>价格</th>
                    <th>颜色</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

    </div>
    <script>
        /**
             *  axios(config)
             *     method: 
             *     url:
             *     data:
             *     headers:
             *     params: query参数
             *     timeout:
             * 
             *  get : 
             *    参数：1. query  2. params/path
             *      1. query: 在 config 配置项的 params里发送
             *      2. params参数怎么携带？ 直接写在url路径里
             * 
             * 
             *  请求分类：
             *    1. get delete     是一类：一般没有请求体
             *    2. post put patch 是一类：一般都有请求体
             */
        function sendGET() {
            
            let p = axios({
                method:'get',
                url:'http://localhost:3000/computers'
            })
            console.log(p);
            // p.then(value=>{
            //     // axios请求成功后返回的是一个Promise对象，成功的结果值，是一个经过包装后的对象，里面有当前次请求的相关信息。服务器响应回来的数据在 data属性中存储
            //     console.log('response data: ',value);
            //     console.log('real data: ', value.data);
            // })
            // .catch(reason=>{
            //     console.log('reason: ', reason);
            // })


            p.then(value=>{
                return value.data;
            }).then(data=>{
                console.log('response data: ', data);
            })
        }

        function sendGETParams(){
            // query
            //http://localhost:3000/computers?username=atguigu&age=18
            axios({
                method:'get',
                url:'http://localhost:3000/computers',
                // params 其实发送的query参数
                params:{
                    username:'atguigu',
                    age:18
                }
            }).then(response=>response.data)
            .then(data=>{
                console.log(data);
            })

            // path参数
            axios({
                method:'get',
                url:'http://localhost:3000/computers/2'
            }).then(response=>response.data)
            .then(data=>{
                console.log('params参数传递获取到的结果: ',data);
            }).catch(e=>{
                console.log('e: ', e);
            })
        }

        function sendPOST(){
            axios({
                method:'post',
                url:'http://localhost:3000/computers',
                // 请求体
                data:{
                    name:'ROG X16',
                    price:20000,
                    color:'black'
                }
            }).then(response=>response.data)
            .then(data=>{
                console.log('post response data: ', data);
            })
        }

        function sendPut(){
            axios({
                method:'put',
                url:'http://localhost:3000/computers/10',
                // 请求体
                data:{
                    price:9900
                }
            }).then(response=>response.data)
            .then(data=>{
                console.log('put response data: ', data);
            })

            axios({
                method:'patch',
                url:'http://localhost:3000/computers/11',
                data:{
                    price:8800
                }
            }).then(response=>response.data)
            .then(data=>{
                console.log('patch response data: ', data);
            })
        }

        function sendDELETE(){
            axios({
                method:'delete',
                url:'http://localhost:3000/computers/10'
            }).then(response=>response.data)
            .then(data=>{
                console.log('delete response data: ', data);
            })
        }


        function sendHeaders(){
            // headers 配置项，携带请求头数据，任何请求方式都可以携带
            axios({
                method:'get',
                url:'http://localhost:3000/computers/12',
                headers:{
                    x:100,
                    y:200,
                    token:'asjdfklghgfl;deasj',
                    authorization:'asdfasdkfj'
                }
            }).then(response=>response.data)
            .then(data=>{
                console.log('get Headers response data: ', data);
            })

            axios({
                method:'post',
                url:'http://localhost:3000/computers',
                headers:{
                    x:1100,
                    y:2200,
                    token:'asjdfklghgfl;deasj',
                    authorization:'asdfasdkfj'
                },
                data:{
                    name:'think pad',
                    price:11000,
                    color:'black'
                }
            }).then(response=>response.data)
            .then(data=>{
                console.log('post Headers response data: ', data);
            })

        }
    </script>
</body>

</html>